<template>
  <div>
       <el-row>
        <el-col :span="5">
          <el-button class="addBtn" @click="handleClose">返回</el-button>
        </el-col>
       
      </el-row>
      <div>
       <el-form :model="ruleForm2"  :rules="rules2" ref="ruleForm2" style="width:100%;" label-width="100px" class="demo-ruleForm">
          
          <el-form-item label="权限控制">
            <el-collapse>

               <el-collapse-item v-for="(val,key) in defualtData" :key="key">
                 <template slot="title">
                   <div style="border:1px solid #ccc;background:#e5e5e5;padding:0 10px">
                     <el-checkbox @change="changFun(val)" v-model="val.checked">{{showTxt(key)}}</el-checkbox>
                  </div>
                </template>
                <div class="chBox">
                  <div >
                    <el-checkbox-group v-model="checkList">
                          <el-checkbox v-for="(itemVal,itemKey) in val.permissions" @change="changeItem(val)" :key="itemKey" :label="itemVal.id">{{itemVal.name}}</el-checkbox>
                      </el-checkbox-group>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>

  </div>
</template>
<script>
import crypto from 'crypto'
import Http from '@/Http/Http'

export default {
  
  data() {
    return {
     checkList:[],
     ruleForm2:{},
     rules2:{}
    };
  },
  props:['defualtData','editId','roleData'],
  created() {
    
    this.roleData.forEach((item,index) =>{
      this.checkList.push(item.id)
      for (const k in this.defualtData) {
        for( const j in this.defualtData[k].permissions ){
          if(this.defualtData[k].permissions[j].id == item.id){
            this.defualtData[k].checked = true
          }
        }
      }
    })
  },
  methods:{
     
    submitForm() {
     if (!this.checkList){
       this.$message.error('请添加权限')
       return
     }
     Http.addPermission({
       "role_id":this.editId,
       "permissionIds":this.checkList
     })
     .then(res =>{
       if( res.data.code == 200 ){
          this.$message.success('设置成功')
          this.$emit('showFun')
       }    
     })
     .catch( error => {
          
        })
    },
   
    resetForm(formName) {
     
      this.$emit('showFun')
    },
    
    handleClose(done) {
      this.$emit('showFun')
    },
    
    showTxt(val){
      switch (val) {
        case 'article': 
          return '文章管理' 
          break
        case 'banner': 
          return 'banner管理' 
          break
        case 'comment': 
          return '评论管理' 
          break
        case 'dynamic': 
          return '动态管理' 
          break
        case 'user': 
          return '用户管理' 
          break 
        case 'video': 
          return '视频管理' 
          break
        case 'keyword': 
          return '关键字管理' 
          break
        case 'manager': 
          return '管理员管理' 
          break 
        case 'message': 
          return '意见管理' 
          break 
        case 'permission': 
          return '权限管理' 
          break 
        case 'problem': 
          return '问题管理' 
          break 
        case 'recommend': 
          return '推荐管理' 
          break 
        case 'role': 
          return '角色管理' 
          break
        case 'common':
           return '上传权限' 
          break
        case 'push':
           return '推送管理' 
          break
        case 'hospital':
          return '医院管理' 
          break
      }
    }, 
    changFun(val){
      
      if (val.checked) {
        for (const k in val.permissions) {
          if (this.checkList.indexOf(val.permissions[k].id) == -1 ) {
            this.checkList.push(val.permissions[k].id)
          }
        }
      } else {
        for (const k in val.permissions) {
          if (this.checkList.indexOf(val.permissions[k].id) > -1 ) {
            this.checkList.splice(this.checkList.indexOf(val.permissions[k].id),1)
          }
        }
      }
    },
    changeItem(val){
      const arr = [];
      for(const k in val.permissions) {
        if (this.checkList.indexOf(val.permissions[k].id) > -1 ) {
          arr.push(0)
        } else {
          arr.push(1)
        }
      }
    
      const sta = arr.every(function(item,index){
        return (item == 1)
      })

      sta ? val.checked = false : val.checked = true;
      
    }
  }
}
</script>
<style>
.chackmargin{
  margin-left:100px!important;
}
.chBox{
  border:1px solid #ccc;
  padding:15px 20px;
  border-bottom:none
}

</style>